<template>
	<u-popup :show="showPop" @close="showPop=false" mode="center" :customStyle="{'background-color':'transparent'}">
		<view class="content">
			<view class="couponBox">
				 <view class="activity-title">
				 	恭喜参与"活动名称"
				 </view>
				 <view class="couponInfo">
				 	<text class="amount">40</text>
					<view class="descBox">
						<view class="info1">
							<text class="tag">指定类</text>
							<text class="type">立减劵</text>
						</view>
						<view class="info2">
							指定车型下单立减
						</view>
					</view>
				 </view>
				 
				 <view class="btn userBtn">
				 	立即使用
				 </view>
				 
				 <view class="couponTip">
				 	去我的优惠券查看
				 </view>
				 
			</view>
	        <view class="btn" @click="showPop=false">
	        	返回活动详情
	        </view>
		</view>
	
	</u-popup>
</template>

<script>
	export default {
		name: '',
		data() {
			return {
				showPop: true,
			}
		},
		props: {
			
		},
		mounted() {

		},
		methods: {

		}
		
	}
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
		top: -100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.couponBox {
		width: 586rpx;
		height: 670rpx;
		background-image: url('https://qykh.shopec.com.cn/image-server/dz/openScreen_coupon.png');
		background-size: 100% 100%;
		position: relative;
		left: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.activity-title {
			max-width: 360rpx;
			margin-top: 60rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #ffffff;
			text-shadow: #a42844 1px 0 10px;
		}
		
		.couponInfo {
			position: relative;
			right: 20rpx;
			margin-top: 80rpx;
			width: 80%;
			height: 200rpx;
			// background-color: #ffffff;
			display: flex;
			align-items: center;
			.amount {
				color: #992634;
				font-size: 100rpx;
				font-weight: bold;
				margin-left: 40rpx;
				font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
				&::before {
					content: '¥';
					font-weight: normal;
					font-size: 30rpx;
					margin-right: 10rpx;
				}
			}
			.descBox {
				margin-left: 20rpx;
				.info1 {
					.tag {
						padding:6rpx 16rpx;
						background: linear-gradient(135deg,#ff9161 0%, #f6495d 100%);
						border-radius: 8rpx;
						color: #FFF0D9;
						font-size: 22rpx;
					}
					.type {
						margin-left: 10rpx;
						color: #333;
						font-size: 30rpx;
					
					}
				}
				.info2 {
					margin-top: 18rpx;
					color: #333;
					font-size: 24rpx;
			
				}
			}
			
			
		}
	}
	.btn {
		margin-top: 50rpx;
		width: 332rpx;
		height: 84rpx;
		line-height: 84rpx;
		text-align: center;
		border: 1rpx solid #fff1da;
		border-radius: 40rpx;
		color: #fff1da;
		font-size: 30rpx;
		font-weight: bold;
		
		
	}
	
	.userBtn {
	  background: linear-gradient(to bottom,#ffffff 0%, #ffbe85 100%);
	  color: #333;
	  border: none;
	  position: relative;
	  left: -20rpx;
	}
	
	.couponTip {
		margin-top: 40rpx;
		position: relative;
		left: -20rpx;
		color: #FFF0D9;
		font-size: 28rpx;
		font-weight: bold;
		letter-spacing: 2rpx;
	}
	
</style>